<template>
    <div class="courseInfo-div">
        <el-form ref="form" :model="courseDetial" label-width="80px">
            <el-form-item label="课程名称:">
                <div>
                    <el-input v-model="courseDetial.courseName"></el-input>
                </div>
            </el-form-item>
            <el-form-item label="课程号:">
                <div>
                    <el-input v-model="courseDetial.courseNumber"></el-input>
                </div>
            </el-form-item>
            <el-form-item label="开设学院:">
                <div>
                    <el-input v-model="courseDetial.college"></el-input>
                </div>
            </el-form-item>
            <el-form-item label="开设专业:">
                <div>
                    <el-input v-model="courseDetial.major"></el-input>
                </div>
            </el-form-item>
            <el-form-item label="开设年级:">
                <div>

                    <el-input v-model="courseDetial.grade"></el-input>
                </div>
            </el-form-item>
            <el-form-item label="学分:">
                <div>
                    <el-input v-model="courseDetial.credit"></el-input>
                </div>
            </el-form-item>
            <el-form-item label="课程类别:">
                <div>
                    <el-input v-model="courseDetial.classification"></el-input>
                </div>
            </el-form-item>
            <el-form-item label="教师:">
                <div>
                    <el-input v-model="courseDetial.teacher"></el-input>
                </div>
            </el-form-item>
            <el-form-item label="上课地点:">
                <div>
                    <el-input v-model="courseDetial.location"></el-input>
                </div>
            </el-form-item>
            <el-form-item label="上课时间:">
                <div>
                    <el-input v-model="courseDetial.time"></el-input>
                </div>
            </el-form-item>
            <el-form-item label="上课周期:">
                <div>
                    <el-input v-model="courseDetial.period"></el-input>
                </div>
            </el-form-item>
        </el-form>
        <el-button type="primary" @click="updateCourse">
            修改完成
        </el-button>
    </div>

</template>
<script>
export default {
    created() {
        this.courseDetial = this.$route.params
        console.log(this.courseDetial)
    },
    data() {
        return {
            courseDetial: {
                courseName: "",
                courseNumber: 0,
                college: "",
                major: "",
                grade: 0,
                credit: 0,
                classification: "",
                teacher: "",
                location: "",
                time: "",
                period: "",
            }
        }
    },
    methods: {
        updateCourse() {
            this.$axios({
                method: "put",
                url: "http://localhost:8000/course/update/" + this.courseDetial.id,
                headers: {
                    AUTHORIZATION: sessionStorage.getItem('access-admin')
                },
                data: {
                    courseName: this.courseDetial.courseName,
                    courseNumber: this.courseDetial.courseNumber,
                    college: this.courseDetial.college,
                    major: this.courseDetial.major,
                    grade: this.courseDetial.grade,
                    credit: this.courseDetial.credit,
                    classification: this.courseDetial.classification,
                    teacher: this.courseDetial.teacher,
                    location: this.courseDetial.location,
                    time: this.courseDetial.time,
                    period: this.courseDetial.period,
                }
            }).then((res) => {
                console.log(res);
            }).catch(err => {
                console.log(err)
            })
        }
    }
}
</script>

<style lang="scss">
.courseInfo-div {
    .el-input {
        position: relative;
        right: 70px;
        width: 300px;
    }

    div {
        display: flex;
        width: 75%;
    }
}
</style>